<template>
    <div class="bot-in">
        <div class="botscrach">
            <span class="faxian">发现<span>AI</span>Bot</span>
            <div class="scrth">
                <input type="text" placeholder="   输入BOT关键词检索">
                <button>
                    <span class="iconfont icon-sousuo"></span>
                </button>
            </div>
            <div>
                <button class="button1">查看BOT收藏</button>
                <button class="button2">创建BOT</button>
            </div>
        </div>

        <div class="gongju">
            <div class="divimg">
                <img src="https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/hot.67f87f9.png" alt="">
                <span>实用AI工具合集</span>
            </div>
            <div class="gongjulist">
                <div class="gongjuitem" v-for="item in botailistData" :key="item.id">
                    <img :src="getAssetsFile(item.url as string)" alt="">
                    <div class="boxbox">
                        <div class="title">{{ item.title }}</div>
                        <div class="content">
                            {{ item.content }}</div>
                    </div>
                    <div class="boxbottom">
                        <div class="bot-index">
                            <span class="iconfont icon-sousuo"></span>
                            <span>{{ item.visit }}</span>
                            <span class="iconfont icon-sousuo"></span>
                            <span>{{ item.sch }}</span>
                        </div>
                        <button class="bot-act">
                            开始互动
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tuijianlist">
            <div class="bottuijian" v-for="item in tuijianList" :key="item.id"
                @click="botlistshow = item.type, activechange(item.id)" :class="{ isbule: item.active }">
                {{ item.title }}
            </div>
        </div>
        <div class="bots" v-for="i in fornum">
            <div v-for="i in 9">
                <div v-for="item in botlistData" :key="item.id" class="bot-out" v-show="botbot(item.type)">
                    <div class="bot-item">
                        <div class="bot-header">
                            <img class="img1" :src="getAssetsFile(item.url)" alt="">
                            <div class="imgdiv1">
                                <div class="imgdiv-title">{{ item.title }}</div>
                                <div class="imgdiv-user">
                                    <img :src="getAssetsFile(item.userurl)" alt="">
                                    <span>{{ item.username }}</span>
                                </div>
                                <div class="imgdiv-content">{{ item.content }}</div>
                            </div>
                        </div>
                        <div class="bot-footer">
                            <div class="bot-index">
                                <span class="iconfont icon-sousuo"></span>
                                <span>{{ item.visit }}</span>
                                <span class="iconfont icon-sousuo"></span>
                                <span>{{ item.sch }}</span>
                            </div>
                            <button class="bot-act">
                                开始互动
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</template>
<script setup lang="ts">
import { getAssetsFile } from '@/util/utils';
import type { botAilistDataType, botListDataType, tuiJianListType } from '../../util/data';
import { ref, onMounted, onUnmounted } from 'vue';
import { getbotAiListData, getbotListData, gettuiJianList } from '@/util/getapi';

const fornum = ref(0);
const botailistData = ref<botAilistDataType>([]);
const tuijianList = ref<tuiJianListType>([]);
const botlistData = ref<botListDataType>([]);

const handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;

    if (scrollTop + clientHeight + 10 >= scrollHeight) {
        fornum.value++;
    }
};

const botlistshow = ref('recommend')

function splitStringBySpace(input: string): string[] {
    return input.split('-');
}

const botbot = ((botlisttype: string) => {
    const bottypelist = splitStringBySpace(botlisttype)
    const contains = bottypelist.find((item) => item === botlistshow.value) !== undefined;
    console.log(contains)
    console.log(bottypelist)
    return contains;

    // return botlisttype.includes(`${botlistshow.value}`)
})

const activechange = (row: number) => {
    tuijianList.value.forEach((item) => {
        if (item.id == row) {
            item.active = true
        } else {
            item.active = false
        }
    })
}

onMounted(() => {
    window.addEventListener('scroll', handleScroll);

    Promise.all([
        getbotAiListData(),
        gettuiJianList(),
        getbotListData()
    ]).then(([botailistdataget, tuijianlistget, botlistdataget]) => {
        if (botailistdataget) {
            botailistData.value = botailistdataget;
        }
        if (tuijianlistget) {
            tuijianList.value = tuijianlistget;
        }
        if (botlistdataget) {
            botlistData.value = botlistdataget;
        }
        fornum.value = 1;
    });
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="scss" scoped>
@import url(../../assets/bot.scss);

.isbule {
    color: #1e80ff
}
</style>